<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改入库信息')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-outorder-check" th:object="${outOrderVo.outOrder}">
        <input name="id" th:value="${outOrderVo.outOrder.id}" type="hidden">
        <h4 class="form-header h4">出库信息</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label">出库单编号：</label>
            <div class="col-sm-8">
                <input name="orderCode" th:value="${outOrderVo.outOrder.orderCode}" class="form-control" type="text"
                       required readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">出库类型：</label>
            <div class="col-sm-8">
                <select name="orderType" class="form-control m-b" th:with="type=${@dict.getType('out_order_type')}" disabled>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{orderType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">订单号：</label>
            <div class="col-sm-8">
                <input name="orderName" th:value="${outOrderVo.outOrder.orderName}" class="form-control" type="text" disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">订单日期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="orderDate" th:value="${#dates.format(outOrderVo.outOrder.orderDate, 'yyyy-MM-dd')}"
                           class="form-control" placeholder="yyyy-MM-dd" type="text"  disabled>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">客户：</label>
            <div class="col-sm-8">
                <input id="customerName" name="customerName" class="form-control" type="text" th:value="${outOrderVo.outOrder.customerName}" readonly >
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">出库仓库：</label>
            <div class="col-sm-8">
                <input id="warehouseName" name="warehouseName" class="form-control" type="text" th:value="${outOrderVo.outOrder.warehouseName}" readonly>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">承运商：</label>
            <div class="col-sm-8">
                <input id="carriersName" name="carriersName" class="form-control" type="text" th:value="${outOrderVo.outOrder.carriersName}" readonly>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <textarea name="remark" class="form-control" maxlength="200" readonly>[[${outOrderVo.outOrder.remark}]]</textarea>
            </div>
        </div>

        <h4 class="form-header h4">商品数据</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px;">
            <h4 class="form-header h4">审核信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">审核结果：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('check_status')}">
                        <input type="radio" th:id="${dict.dictCode}" name="orderStatus" th:value="${dict.dictValue}"
                               required>
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">审核意见：</label>
                <div class="col-sm-8">
                    <textarea name="advice" class="form-control" maxlength="200"></textarea>
                </div>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "store/outorder";

    $("#form-outorder-check").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/checkStatus", $('#form-outorder-check').serialize());
        }
    }

    $("input[name='orderDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });


    $(function () {
        // 初始化数据, 可以由后台传过来
        var data = [[${outOrderVo.items}]];
        var options = {
            data: data,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var id = $.common.sprintf("<input type='hidden' name='items[%s].id' value='%s' readonly>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + id;
                    }
                },
                {
                    field: 'id',
                    align: 'center',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'batchNo',
                    align: 'center',
                    title: '批次',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='items[%s].batchNo' value='%s' disabled>", index, value);
                        return html;
                    }
                },
                {
                    field: 'goodsName',
                    align: 'center',
                    title: '商品名称',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='items[%s].goodsName' value='%s' readonly>", index, value);
                        var goodsId = $.common.sprintf("<input type='hidden' name='items[%s].goodsId' value='%s'>", index, row.goodsId);//商品id 隐藏域
                        var goodsCode = $.common.sprintf("<input type='hidden' name='items[%s].goodsCode' value='%s'>", index, row.goodsCode);//商品code 隐藏域
                        return html + goodsId + goodsCode;
                    }
                },
                {
                    field: 'stockNumber',
                    align: 'center',
                    title: '库存数量',
                    formatter: function (value, row, index) {
                        var html = '<input class="form-control" type="text" name="items[' + index + '].stockNumber" value="' + value + '" readonly>';
                        return html;
                    },
                },
                {
                    field: 'planNumber',
                    align: 'center',
                    title: '应出库数量',
                    formatter: function (value, row, index) {
                        var html = '<input class="form-control" type="text" name="items[' + index + '].planNumber" value="' + value + '" readonly>';
                        return html;
                    },
                },
                {
                    field: 'actualNumber',
                    align: 'center',
                    title: '出库数量',
                    formatter: function (value, row, index) {
                        var html = '<input class="form-control" type="text" name="items[' + index + '].actualNumber" value="' + value + '"  readonly>';
                        return html;
                    },
                },
                {
                    field: 'goodsUnitDesc',
                    align: 'center',
                    title: '单位',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='items[%s].goodsUnitDesc' value='%s' readonly>", index, value);
                        var goodsUnit = $.common.sprintf("<input type='hidden' name='items[%s].goodsUnit' value='%s'>", index, row.goodsUnit);//商品unit
                        return html+goodsUnit;
                    }
                },
                {
                    field: 'packageNumber',
                    align: 'center',
                    title: '包装数量',
                    formatter: function(value, row, index) {
                        var html = '<input class="form-control" type="number" name="items['+index+'].packageNumber" value="'+value+'" maxlength="6" disabled>';
                        return html;
                    },
                },
                {
                    field: 'packageUnit',
                    align: 'center',
                    title: '包装规格',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='items[%s].packageUnit' value='%s' disabled>", index, value );
                        return html;
                    }
                },
                {
                    field: 'remark',
                    align: 'center',
                    title: '要求',
                    formatter: function(value, row, index) {
                        var html = '<textarea class="form-control"  name="items['+index+'].remark" maxlength="200" disabled>'+value+'</textarea>';
                        return html;
                    }
                }
            ]
        };
        $.table.init(options);
    });


</script>
</body>
</html>